<html>
    <head>
        <meta charset="UTF-8"/>
        <title>图表</title>
        <link rel="stylesheet" type="text/css" href="./line.css"/>
    </head>
    <body>
        <div id="top">
            <span style="width: 300px; height: 100%; float: left; margin-left: 10px; text-align: center; line-height: -moz-block-height">自定义条形图</span>
        </div>
        <div id="left">
            <span class="sort">1</span>
            <span class="sort">2</span>
            <span class="sort">3</span>
            <span class="sort">4</span>
        </div>
        <div id="container">
            <div id="right">
                <div id="div_line1" class="div_line">
                    <canvas id="line1" width="400px" height="350px"></canvas>
                </div>
                <div id="div_line2" class="div_line">
                    <canvas id="line2" width="400px" height="350px"></canvas>
                </div>
                <div id="div_line3" class="div_line" style="width: 335px">
                    <canvas id="line3" width="335px" height="350px"></canvas>
                </div>
                <div id="div_line4" class="div_line" style="width: 97%;">
                    <canvas id="line4"></canvas>
                </div>
                <div id="div_line5" class="div_line" style="width: 97%">
                    <canvas id="line5"></canvas>
                </div>
                <div id="div_line6" class="div_line" style="width: 97%">
                    <canvas id="line6"></canvas>
                </div>
                <div id="div_line7" class="div_line" style="width: 97%">
                    <canvas id="line7"></canvas>
                </div>

                <div id="div_line8" class="div_line" style="width: 97%">
                    <canvas id="line8"></canvas>
                </div>
            </div>
            <div id="botton" style="width: 100%; height: 30px"></div>
        </div>
        <script type="text/javascript" src="./line.js"></script>
    </body>
</html>